///
<reference types="@dcloudio/types" />
<template>
	<view class="login-bg">
		<view class="login-card">
			<!-- 登录页头部 -->
			<view v-if="isLogin" class="login-header-center">
				<image src="/static/logo.png" class="login-logo-center" />
				<text class="login-appname-center">社区医疗</text>
			</view>
			<!-- 注册页头部 -->
			<view v-else class="login-row-header">
				<image src="/static/logo.png" class="login-logo" />
				<text class="login-appname">社区医疗</text>
				<text class="login-title-register">欢迎注册!</text>
			</view>
			<!-- 登录标题 -->
			<text v-if="isLogin" class="login-title">登录</text>
			<!-- 登录表单 -->
			<view class="login-form" v-if="isLogin">
				<view class="login-label">账号</view>
				<input v-model="loginForm.account" placeholder="请输入登陆手机号或身份证号" class="login-input" />
				<view class="login-label">密码</view>
				<input v-model="loginForm.password" type="password" placeholder="请输入密码" class="login-input" />
				<button class="login-btn" @click="handleLogin">登录</button>
				<view class="login-tip">
					没有账号？<text class="login-link" @click="isLogin = false">立即注册</text>
				</view>
			</view>
			<!-- 注册表单 -->
			<view class="login-form" v-else>
				<view class="login-label">手机号</view>
				<input v-model="registerForm.phone" placeholder="请输入登陆手机号或身份证号" class="login-input" />
				<view class="login-label">密码</view>
				<input v-model="registerForm.password" type="password" placeholder="设置密码" class="login-input" />
				<view class="login-label">确认密码</view>
				<input v-model="registerForm.confirmPassword" type="password" placeholder="再次输入密码确认"
					class="login-input" />
				<view class="login-row">
					<view class="login-col">
						<view class="login-label">出生日期</view>
						<picker mode="date" :value="registerForm.birthday" @change="onDateChange">
							<view class="login-picker">{{ registerForm.birthday }}</view>
						</picker>
					</view>
					<view class="login-col">
						<view class="login-label">性别</view>
						<view class="login-gender">
							<button :class="['gender-btn', registerForm.gender==='0' ? 'active' : '']"
								@click="registerForm.gender='0'">女</button>
							<button :class="['gender-btn', registerForm.gender==='1' ? 'active' : '']"
								@click="registerForm.gender='1'">男</button>
						</view>
					</view>
				</view>
				<view class="login-label">居民身份证</view>
				<input v-model="registerForm.uid" placeholder="请输入18位身份证" class="login-input" />
				<view class="login-label">姓名</view>
				<input v-model="registerForm.name" placeholder="请输入姓名" class="login-input" />
				<button class="login-btn" @click="handleRegister">确认注册</button>
				<view class="login-tip">
					已有账号？<text class="login-link" @click="isLogin = true">去登陆</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { md5 } from 'js-md5'
	import { saveToken, saveUserInfo, isLoggedIn } from '../../utils/auth.js'
	declare const uni : any;

	const isLogin = ref(true)
	const loginForm = ref({
		account: '',
		password: ''
	})
	const registerForm = ref({
		phone: '',
		password: '',
		confirmPassword: '',
		birthday: '1960-1-1',
		gender: '0',
		uid: '',
		name: ''
	})
	const onDateChange = (e : any) => {
		registerForm.value.birthday = e.detail.value
	}

	// 页面加载时检查登录状态
	onMounted(() => {
		if (isLoggedIn()) {
			// 如果已登录，直接跳转到首页
			uni.navigateTo({
				url: '/pages/index/index'
			})
		}
	})

	const handleLogin = () => {
		console.log(loginForm.value);

		if (!loginForm.value.account || !loginForm.value.password) {
			uni.showToast({ title: '请填写账号和密码', icon: 'none' })
			return
		}
		uni.request({
			url: 'http://localhost:3010/user/login',
			method: 'POST',
			header: {
				'content-type': 'application/x-www-form-urlencoded'
			},
			data: {
				phone: loginForm.value.account,
				pwdmd5: md5(loginForm.value.password)
			},
			success: (res) => {
				console.log(res);

				if (res.data.code === 200) {
					// 保存token
					if (res.data.data && res.data.data.token) {
						saveToken(res.data.data.token)
					}

					// 保存用户信息（可选）
					if (res.data.data && res.data.data.user) {
						saveUserInfo(res.data.data.user)
					}

					uni.showToast({ title: '登录成功', icon: 'success' })

					// 直接跳转到首页
					uni.navigateTo({
						url: '/pages/index/index'
					})
				} else {
					uni.showToast({ title: typeof res.data.msg === 'string' ? res.data.msg : '登录失败', icon: 'none' })
				}
			},
			fail: () => {
				uni.showToast({ title: '网络错误', icon: 'none' })
			}
		})
	}
	const handleRegister = () => {
		if (!registerForm.value.phone || !registerForm.value.password || !registerForm.value.confirmPassword || !registerForm.value.uid || !registerForm.value.name) {
			uni.showToast({ title: '请填写完整信息', icon: 'none' })
			return
		}
		if (registerForm.value.password !== registerForm.value.confirmPassword) {
			uni.showToast({ title: '两次密码不一致', icon: 'none' })
			return
		}
		console.log(registerForm.value);

		uni.request({
			url: 'http://localhost:3010/user/register',
			method: 'POST',
			header: {
				'content-type': 'application/x-www-form-urlencoded'
			},
			data: {
				uid: registerForm.value.uid,
				name: registerForm.value.name,
				phone: registerForm.value.phone,
				gender: registerForm.value.gender,
				birthday: registerForm.value.birthday,
				pwdmd5: md5(registerForm.value.password)
			},
			success: (res) => {
				console.log(res)
				if (res.data.code === 200) {
					uni.showToast({ title: '注册成功', icon: 'success' })
					isLogin.value = true
				} else {
					uni.showToast({ title: typeof res.data.msg === 'string' ? res.data.msg : '注册失败', icon: 'none' })
				}
			},
			fail: () => {
				uni.showToast({ title: '网络错误', icon: 'none' })
			}
		})
	}

	// 示例：如何调用需要token认证的接口
	// requestWithToken({
	//   url: 'http://localhost:3000/user/health',
	//   method: 'GET',
	//   success: (res) => {
	//     // 处理返回数据
	//   }
	// })
</script>

<style scoped>
	.login-bg {
		width: 100vw;
		height: 100vh;
		min-height: 100vh;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.login-card {
		width: 92vw;
		max-width: 700rpx;
		min-height: 80vh;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 32rpx #e0f7ef;
		padding: 0 0 48rpx 0;
		overflow: hidden;
		margin: 0 auto;
	}

	.login-header-center {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80rpx;
		margin-bottom: 0;
	}

	.login-logo-center {
		width: 140rpx;
		height: 140rpx;
		margin-bottom: 18rpx;
	}

	.login-appname-center {
		font-size: 40rpx;
		color: #222;
		font-weight: 500;
		margin-bottom: 40rpx;
		letter-spacing: 2rpx;
	}

	.login-title {
		font-size: 52rpx;
		font-weight: bold;
		margin-top: 0;
		margin-bottom: 48rpx;
		text-align: center;
		color: #111;
		width: 100%;
	}

	.login-form {
		width: 86vw;
		max-width: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin: 0 auto;
	}

	.login-label {
		font-size: 32rpx;
		font-weight: bold;
		margin: 32rpx 0 12rpx 0;
	}

	.login-input {
		border: none;
		border-radius: 12rpx;
		background: #f7f8fa;
		font-size: 30rpx;
		padding: 22rpx 24rpx;
		margin-bottom: 0;
		outline: none;
		box-shadow: 0 2rpx 8rpx #e0f7ef;
		border-bottom: 2rpx solid #2ee59d;
	}

	.login-input::placeholder {
		color: #bbb;
		font-size: 28rpx;
	}

	.login-row {
		display: flex;
		gap: 24rpx;
		margin: 32rpx 0 0 0;
	}

	.login-col {
		flex: 1;
	}

	.login-picker {
		border: 2rpx solid #2ee59d;
		border-radius: 12rpx;
		padding: 12rpx 18rpx;
		color: #2ee59d;
		font-size: 30rpx;
		background: #f7f8fa;
		margin-top: 6rpx;
	}

	.login-gender {
		display: flex;
		gap: 12rpx;
		margin-top: 6rpx;
	}

	.gender-btn {
		flex: 1;
		border: 2rpx solid #2ee59d;
		background: #fff;
		color: #2ee59d;
		border-radius: 12rpx;
		font-size: 30rpx;
		padding: 10rpx 0;
		font-weight: bold;
		transition: background 0.2s, color 0.2s;
	}

	.gender-btn.active {
		background: #2ee59d;
		color: #fff;
	}

	.login-btn {
		background: #16e39a;
		color: #fff;
		font-size: 36rpx;
		border-radius: 24rpx;
		margin: 56rpx 0 18rpx 0;
		padding: 28rpx 0;
		font-weight: bold;
		letter-spacing: 2rpx;
		border: none;
		box-shadow: 0 4rpx 16rpx #b2ffe0;
	}

	.login-tip {
		text-align: center;
		color: #888;
		margin-top: 18rpx;
		font-size: 26rpx;
	}

	.login-link {
		color: #2ee59d;
		font-weight: bold;
		margin-left: 8rpx;
		font-size: 28rpx;
	}

	/* 注册页头部（横向） */
	.login-row-header {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 60rpx;
		margin-bottom: 0;
		padding-left: 40rpx;
	}

	.login-logo {
		width: 90rpx;
		height: 90rpx;
		margin-right: 18rpx;
	}

	.login-appname {
		font-size: 30rpx;
		color: #666;
		font-weight: 400;
		vertical-align: middle;
		margin-right: 18rpx;
	}

	.login-title-register {
		font-size: 44rpx;
		font-weight: bold;
		color: #111;
		margin-left: 0;
	}
</style>